<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">


<!-- 在head中的脚本会在页面调用的时候执行 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<!--<link th:href="@{/css/index.css}" rel="stylesheet">-->
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.5.4/theme-chalk/index.css">
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui@2.5.2/lib/theme-chalk/index.css">-->
<!-- 引入组件库 -->
<!--<script src="https://unpkg.com/element-ui@2.5.2/lib/index.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.5.4/index.js"></script>

<!-- 引入js-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<!--parse markdown-->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>


<link rel="stylesheet" th:href="@{/css/index.css}">
<script th:src="@{/js/util.js}"></script>

<head>
  <meta charset="UTF-8">
  <title>网络信息安全教学实验系统V3.3</title>
</head>
<body>

<div id="app">
  <el-container id="main-container">


    <el-header class="top-header">
      <div>
        <div>网络信息安全教学实验系统</div>
        <div style="float: right; font-size: 16px; font-weight: normal">V3.3</div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="377px">
        <div>
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
          </el-input>
        </div>
        <br>
        <div>
          <el-tree
              :data="treeData"
              node-key="id"
              :props="defaultProps"
              highlight-current
              default-expand-all
              @node-click="onNodeClick">
          </el-tree>
        </div>
      </el-aside>
      <el-container>
        <el-header class="sub-header">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple"><span v-text="currentChosenNodeName"></span></div>
            </el-col>
            <el-col :span="12" :offset="6">
              <div class="grid-content bg-purple" v-if="isLeaf">
                <el-button type="info" icon="el-icon-info" @click="showExeDetail = true" size="small"></el-button>
              </div>
            </el-col>
          </el-row>
        </el-header>

        <el-main>
          <el-dialog title="实验详情" :visible.sync="showExeDetail" width="30%" center
                     :close-on-click-modal="false"
                     :close-on-press-escape="false">
            <el-card shadow="hover">
              <img th:src="@{/image/exp.png}" class="image dialog-cover" alt="房间封面">
              <div
                  style="padding: 14px; font-family: 'PingFang SC'; font-size: medium; line-height: 28px">
                <label>实验目的：</label><span v-html="currentDataObj.purpose"></span><br>
                <label>实验人数：</label><span v-html="currentDataObj.numPerGrp"></span><br>
                <label>系统环境：</label><span v-html="currentDataObj.sysEnv"></span><br>
                <label>网络环境：</label><span v-html="currentDataObj.netEnv"></span><br>
                <label>实验工具：</label><span v-html="currentDataObj.tools"></span><br>
                <label>实验原理：</label><span v-html="currentDataObj.principal"></span><br>
                <label>实验步骤：</label><span>见主屏幕</span><br>
              </div>
            </el-card>
          </el-dialog>
          <div id="content-area" v-html="currentChosenNodeExtendStr">
          </div>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</div>

<script type="text/javascript" th:src="@{/js/index.js}"></script>

</body>
</html>